<template>
  <el-row gutter:20 class="home">
    <el-col :span="8" style="margin-top: 20px">
      <el-card shadow="hover">
        <div class="user">
          <img :src="userImg" />
          <div class="userinfo">
            <p class="name"></p>
            <p class="access"></p>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 20px; height: 400px">
        <el-table :data="tableData">
          <el-table-column v-for="(item, key) in tableLabel" :key="key" :prop="key" :label="item">
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16" style="margin-top: 20px">
      <div class="num">
        <el-card v-for="item in countData" :key="item.name" :body-style="{ display: 'flex', padding: 0 }">
          <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i>
          <div class="detail">
            <p class="num">{{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
      <el-card style="height: 280px" class="card3">
        <div style="height: 280px" ref="echartsLine"></div>
      </el-card>
      <div class="graph">
        <el-card style="height: 200px" class="card2">
          <div style="height: 180px" ref="echartsBar"></div>
        </el-card>
        <el-card style="height: 200px" class="card1">
          <div style="height: 180px"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { Getbyids } from "@/request/auth.js";
import { GetAppUserByid } from '@/api/Blogslist.js';
import appConfig from "@/config/appconfig.js";
// 引入echarts
export default {
  name: "MyHome",
  data() {
    return {
      Avatarid: localStorage.getItem("Avatarid"),
      userImg: "",
      tableData: [
        {
          name: 'html',
          todayBuy: 500,
          monthBuy: 3500,
          totalBuy: 22000
        },
        {
          name: 'sqlserve',
          todayBuy: 300,
          monthBuy: 2200,
          totalBuy: 24000
        },
        {
          name: '.net',
          todayBuy: 800,
          monthBuy: 4500,
          totalBuy: 65000
        },
        {
          name: 'java',
          todayBuy: 1200,
          monthBuy: 6500,
          totalBuy: 45000
        },
        {
          name: 'nodejs',
          todayBuy: 300,
          monthBuy: 2000,
          totalBuy: 34000
        },
        {
          name: 'c++',
          todayBuy: 350,
          monthBuy: 3000,
          totalBuy: 22000
        }
      ],
      tableLabel: {
        name: "文章",
        todayBuy: "今日点赞",
        monthBuy: "本月点赞",
        totalBuy: "总点赞",
      },
      countData: [
        {
          name: "今日评论",
          value: 100,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日点赞",
          value: 834,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日新增文章",
          value: 213,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月评论",
          value: 123,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月点赞",
          value: 1222,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月新增文章",
          value: 343,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
    };
  },
  methods: {
    getAvatar() {
      this.userImg = `${appConfig.baseUrl}/files/${this.Avatarid}`
      console.log(this.userImg)
      if (localStorage.getItem('imageurl')) {
        this.userImg = localStorage.getItem('imageurl')
      }
    },
  },
  mounted() {
    this.getAvatar();
    const id = Getbyids();
    GetAppUserByid(id).then((res) => {
      let username = res.data.data.userName;
      let name = $('.name')
      let access = $('.access')
      name.html(`${username}`);
      let isadmin = res.data.data.isadministrator
      if (isadmin === true) {
        access.html("管理员")
      } else {
        access.html("普通用户")
      }
    })

  },
};

</script>

<style>
.card1 {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/img4.webp");
  background-size: 100% 100%;
}

.card2 {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/img5.webp");
  background-size: 100% 100%;
}

.card3 {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/img6.webp");
  background-size: 100% 100%;
}
</style>